<template>
  <!-- 类型选择 -->
  <div class="type-box">
    <div
      @click="change(item.state, index)"
      v-for="(item, index) in list"
      :key="index"
      :style="{
        backgroundColor: currentIndex === index ? '#2a2f33' : item.bgcolor,
      }">
      <div>{{ item.title }}</div>
      <div :style="{ color: item.color }" class="num">{{ item.num }}</div>
      <div v-if="currentIndex === index" class="underLine"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import emitter from "./utils/index";

onMounted(() => {
  init();
});

// 列表数组  里面有待处理 处理中 已解决三种状态
const list=ref([
  {
    title:'待处理',
    color:'red',
    state:'pending',
    bgcolor:'#1f232c'
  },
  {
    title:'处理中',
    color:'orange',
    state:'processing',
    bgcolor:'#1f232c'
  },
  {
    title:'已解决',
    color:'blue',
    state:'resolved',
    bgcolor:'#1f232c'
  }
])

// 初始化函数  计算数量  设置对应级别的颜色和文字
const init=()=>{
  list.value.forEach(num => {
    num.num=db.filter(item=>item.state===num.state).length
  })
}

// 当前选中项的下标 默认为0
let currentIndex=ref(0)
// 改变状态和下标
const change=(state, index)=>{
  currentIndex.value=index
  emitter.emit('changeType',state)
}
</script>


<style scoped>
.type-box{
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.type-box>div{
  width: 96px;
  height: 60px;
  color: rgba(232, 232, 232, 1);
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  flex-direction: column;
}
.num{
  font-size: 16px;
  margin: 10px;
}
.underLine{
  width: 96px;
  height: 2px;
  background-color: skyblue;
}
</style>